<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" 
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head th:replace="fragments/header :: head('我的书籍')">
    <title>我的书籍 - 校园二手书交易平台</title>
</head>
<body>
    <!-- 导航栏 -->
    <nav th:replace="fragments/header :: navbar('my-books')"></nav>

    <!-- 页面内容 -->
    <div class="container mt-4 page-content">
        <!-- 导航面包屑 -->
        <div th:with="breadcrumbs=${
            {
                {title: '我的书籍', url: ''}
            }
        }" th:replace="fragments/header :: breadcrumb(${breadcrumbs})"></div>

        <!-- 标题和操作按钮 -->
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2>我的书籍</h2>
            <a th:href="@{/book/publish}" class="btn btn-primary">
                <i class="fas fa-plus-circle mr-1"></i> 发布新书籍
            </a>
        </div>

        <!-- 标签页 -->
        <ul class="nav nav-tabs mb-4" id="bookTabs" role="tablist">
            <li class="nav-item">
                <a class="nav-link active" id="all-tab" data-toggle="tab" href="#all" role="tab">
                    全部书籍 <span class="badge badge-secondary" th:text="${#lists.size(books)}">3</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="on-sale-tab" data-toggle="tab" href="#on-sale" role="tab">
                    在售书籍 <span class="badge badge-success" th:text="${#lists.size(books.?[status == 1])}">3</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" id="off-sale-tab" data-toggle="tab" href="#off-sale" role="tab">
                    已下架 <span class="badge badge-danger" th:text="${#lists.size(books.?[status == 0])}">0</span>
                </a>
            </li>
        </ul>

        <!-- 标签页内容 -->
        <div class="tab-content" id="bookTabsContent">
            <!-- 全部书籍 -->
            <div class="tab-pane fade show active" id="all" role="tabpanel">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead class="thead-light">
                            <tr>
                                <th>书籍信息</th>
                                <th>分类</th>
                                <th>价格</th>
                                <th>浏览量</th>
                                <th>状态</th>
                                <th>发布时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr th:each="book : ${books}">
                                <td>
                                    <div class="d-flex align-items-center">
                                        <img th:src="${book.imageUrl != null ? book.imageUrl : '/booktrading/static/images/default-book.jpg'}" 
                                             class="book-thumbnail mr-3" alt="书籍封面">
                                        <div>
                                            <h6 class="mb-1" th:text="${book.title}">书籍标题</h6>
                                            <small class="text-muted" th:text="${book.author}">作者</small>
                                        </div>
                                    </div>
                                </td>
                                <td th:text="${book.category}">分类</td>
                                <td>
                                    <span class="text-danger font-weight-bold" th:text="'¥' + ${#numbers.formatDecimal(book.price, 1, 2)}">¥99.00</span>
                                </td>
                                <td th:text="${book.views}">0</td>
                                <td>
                                    <span th:if="${book.status == 1}" class="badge badge-success">在售</span>
                                    <span th:if="${book.status == 0}" class="badge badge-secondary">已下架</span>
                                </td>
                                <td th:text="${#dates.format(book.createTime, 'yyyy-MM-dd')}">2023-01-01</td>
                                <td>
                                    <div class="btn-group">
                                        <a th:href="@{'/book/edit/' + ${book.id}}" class="btn btn-sm btn-info mr-2">
                                            <i class="fas fa-edit"></i> 编辑
                                        </a>
                                        <button th:if="${book.status == 1}" 
                                                class="btn btn-sm btn-danger remove-book" 
                                                th:data-id="${book.id}">
                                            <i class="fas fa-archive"></i> 下架
                                        </button>
                                        <button th:if="${book.status == 0}" 
                                                class="btn btn-sm btn-success relist-book" 
                                                th:data-id="${book.id}">
                                            <i class="fas fa-undo"></i> 上架
                                        </button>
                                        <button class="btn btn-sm btn-danger delete-book ml-2" 
                                                th:data-id="${book.id}">
                                            <i class="fas fa-trash"></i> 删除
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            <tr th:if="${#lists.isEmpty(books)}">
                                <td colspan="7" class="text-center py-5">
                                    <div class="empty-state">
                                        <i class="fas fa-books fa-3x text-muted mb-3"></i>
                                        <h5>暂无书籍</h5>
                                        <p class="text-muted">您还没有发布任何书籍，现在就去发布吧！</p>
                                        <a th:href="@{/book/publish}" class="btn btn-primary">
                                            <i class="fas fa-plus-circle mr-1"></i> 发布新书籍
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- 在售书籍 -->
            <div class="tab-pane fade" id="on-sale" role="tabpanel">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead class="thead-light">
                            <tr>
                                <th>书籍信息</th>
                                <th>分类</th>
                                <th>价格</th>
                                <th>浏览量</th>
                                <th>状态</th>
                                <th>发布时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr th:each="book : ${books.?[status == 1]}">
                                <td>
                                    <div class="d-flex align-items-center">
                                        <img th:src="${book.imageUrl != null ? book.imageUrl : '/booktrading/static/images/default-book.jpg'}" 
                                             class="book-thumbnail mr-3" alt="书籍封面">
                                        <div>
                                            <h6 class="mb-1" th:text="${book.title}">书籍标题</h6>
                                            <small class="text-muted" th:text="${book.author}">作者</small>
                                        </div>
                                    </div>
                                </td>
                                <td th:text="${book.category}">分类</td>
                                <td>
                                    <span class="text-danger font-weight-bold" th:text="'¥' + ${#numbers.formatDecimal(book.price, 1, 2)}">¥99.00</span>
                                </td>
                                <td th:text="${book.views}">0</td>
                                <td>
                                    <span class="badge badge-success">在售</span>
                                </td>
                                <td th:text="${#dates.format(book.createTime, 'yyyy-MM-dd')}">2023-01-01</td>
                                <td>
                                    <div class="btn-group">
                                        <a th:href="@{'/book/edit/' + ${book.id}}" class="btn btn-sm btn-info mr-2">
                                            <i class="fas fa-edit"></i> 编辑
                                        </a>
                                        <button class="btn btn-sm btn-danger remove-book" th:data-id="${book.id}">
                                            <i class="fas fa-archive"></i> 下架
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            <tr th:if="${#lists.isEmpty(books.?[status == 1])}">
                                <td colspan="7" class="text-center py-5">
                                    <div class="empty-state">
                                        <i class="fas fa-store-alt-slash fa-3x text-muted mb-3"></i>
                                        <h5>暂无在售书籍</h5>
                                        <p class="text-muted">您还没有正在出售的书籍</p>
                                        <a th:href="@{/book/publish}" class="btn btn-primary">
                                            <i class="fas fa-plus-circle mr-1"></i> 发布新书籍
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- 已下架 -->
            <div class="tab-pane fade" id="off-sale" role="tabpanel">
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead class="thead-light">
                            <tr>
                                <th>书籍信息</th>
                                <th>分类</th>
                                <th>价格</th>
                                <th>浏览量</th>
                                <th>状态</th>
                                <th>发布时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr th:each="book : ${books.?[status == 0]}">
                                <td>
                                    <div class="d-flex align-items-center">
                                        <img th:src="${book.imageUrl != null ? book.imageUrl : '/booktrading/static/images/default-book.jpg'}" 
                                             class="book-thumbnail mr-3" alt="书籍封面">
                                        <div>
                                            <h6 class="mb-1" th:text="${book.title}">书籍标题</h6>
                                            <small class="text-muted" th:text="${book.author}">作者</small>
                                        </div>
                                    </div>
                                </td>
                                <td th:text="${book.category}">分类</td>
                                <td>
                                    <span class="text-danger font-weight-bold" th:text="'¥' + ${#numbers.formatDecimal(book.price, 1, 2)}">¥99.00</span>
                                </td>
                                <td th:text="${book.views}">0</td>
                                <td>
                                    <span class="badge badge-secondary">已下架</span>
                                </td>
                                <td th:text="${#dates.format(book.createTime, 'yyyy-MM-dd')}">2023-01-01</td>
                                <td>
                                    <div class="btn-group">
                                        <a th:href="@{'/book/edit/' + ${book.id}}" class="btn btn-sm btn-info mr-2">
                                            <i class="fas fa-edit"></i> 编辑
                                        </a>
                                        <button class="btn btn-sm btn-success relist-book" th:data-id="${book.id}">
                                            <i class="fas fa-undo"></i> 上架
                                        </button>
                                    </div>
                                </td>
                            </tr>
                            <tr th:if="${#lists.isEmpty(books.?[status == 0])}">
                                <td colspan="7" class="text-center py-5">
                                    <div class="empty-state">
                                        <i class="fas fa-archive fa-3x text-muted mb-3"></i>
                                        <h5>暂无下架书籍</h5>
                                        <p class="text-muted">您没有已下架的书籍</p>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- 页脚 -->
    <footer th:replace="fragments/footer :: footer"></footer>

    <!-- JavaScript引用 -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.min.js"></script>
    <script th:src="@{/static/js/common.js}"></script>
    
    <!-- 页面特定脚本 -->
    <script th:inline="javascript">
        $(document).ready(function() {
            // 下架书籍
            $('.remove-book').click(function() {
                var bookId = $(this).data('id');
                var $button = $(this);
                
                if (confirm('确定要下架这本书吗？')) {
                    $.ajax({
                        url: '/booktrading/book/remove/' + bookId,
                        type: 'POST',
                        success: function(response) {
                            if (response.success) {
                                // 更新UI
                                var $row = $button.closest('tr');
                                var $statusCell = $row.find('td:nth-child(5)');
                                var $actionCell = $row.find('td:last-child');
                                
                                $statusCell.html('<span class="badge badge-secondary">已下架</span>');
                                $actionCell.find('.btn-group').html(
                                    '<a href="/booktrading/book/edit/' + bookId + '" class="btn btn-sm btn-info mr-2">' +
                                    '<i class="fas fa-edit"></i> 编辑</a>' +
                                    '<button class="btn btn-sm btn-success relist-book" data-id="' + bookId + '">' +
                                    '<i class="fas fa-undo"></i> 上架</button>'
                                );
                                
                                // 更新标签页计数
                                updateTabCounts();
                                
                                // 显示成功消息
                                showAlert('success', '书籍已下架');
                            } else {
                                showAlert('danger', response.message || '下架失败，请稍后重试');
                            }
                        },
                        error: function() {
                            showAlert('danger', '系统错误，请稍后重试');
                        }
                    });
                }
            });
            
            // 上架书籍
            $(document).on('click', '.relist-book', function() {
                var bookId = $(this).data('id');
                var $button = $(this);
                
                if (confirm('确定要重新上架这本书吗？')) {
                    $.ajax({
                        url: '/booktrading/book/relist/' + bookId,
                        type: 'POST',
                        success: function(response) {
                            if (response.success) {
                                // 更新UI
                                var $row = $button.closest('tr');
                                var $statusCell = $row.find('td:nth-child(5)');
                                var $actionCell = $row.find('td:last-child');
                                
                                $statusCell.html('<span class="badge badge-success">在售</span>');
                                $actionCell.find('.btn-group').html(
                                    '<a href="/booktrading/book/edit/' + bookId + '" class="btn btn-sm btn-info mr-2">' +
                                    '<i class="fas fa-edit"></i> 编辑</a>' +
                                    '<button class="btn btn-sm btn-danger remove-book" data-id="' + bookId + '">' +
                                    '<i class="fas fa-archive"></i> 下架</button>'
                                );
                                
                                // 更新标签页计数
                                updateTabCounts();
                                
                                // 显示成功消息
                                showAlert('success', '书籍已上架');
                            } else {
                                showAlert('danger', response.message || '上架失败，请稍后重试');
                            }
                        },
                        error: function() {
                            showAlert('danger', '系统错误，请稍后重试');
                        }
                    });
                }
            });
            
            // 删除书籍
            $(document).on('click', '.delete-book', function() {
                var bookId = $(this).data('id');
                var $button = $(this);
                
                if (confirm('确定要删除这本书吗？此操作不可恢复！')) {
                    $.ajax({
                        url: '/booktrading/book/delete/' + bookId,
                        type: 'POST',
                        success: function(response) {
                            if (response.success) {
                                // 从表格中移除该行
                                $button.closest('tr').fadeOut(400, function() {
                                    $(this).remove();
                                    // 更新标签页计数
                                    updateTabCounts();
                                    // 检查是否需要显示空状态
                                    checkEmptyState();
                                });
                                
                                // 显示成功消息
                                showAlert('success', '书籍已删除');
                            } else {
                                showAlert('danger', response.message || '删除失败，请稍后重试');
                            }
                        },
                        error: function() {
                            showAlert('danger', '系统错误，请稍后重试');
                        }
                    });
                }
            });
            
            // 检查是否需要显示空状态
            function checkEmptyState() {
                var $activeTab = $('.tab-pane.active');
                if ($activeTab.find('tbody tr').length === 0) {
                    var emptyStateHtml = '<tr><td colspan="7" class="text-center py-5">' +
                        '<div class="empty-state">' +
                        '<i class="fas fa-books fa-3x text-muted mb-3"></i>' +
                        '<h5>暂无书籍</h5>' +
                        '<p class="text-muted">您还没有发布任何书籍，现在就去发布吧！</p>' +
                        '<a href="/booktrading/book/publish" class="btn btn-primary">' +
                        '<i class="fas fa-plus-circle mr-1"></i> 发布新书籍</a>' +
                        '</div></td></tr>';
                    $activeTab.find('tbody').html(emptyStateHtml);
                }
            }
            
            // 更新标签页计数
            function updateTabCounts() {
                var totalCount = $('tbody tr').length;
                var onSaleCount = $('tbody tr:has(.badge-success)').length;
                var offSaleCount = $('tbody tr:has(.badge-secondary)').length;
                
                $('#all-tab .badge').text(totalCount);
                $('#on-sale-tab .badge').text(onSaleCount);
                $('#off-sale-tab .badge').text(offSaleCount);
            }
            
            // 显示提示信息
            function showAlert(type, message) {
                var alertHtml = '<div class="alert alert-' + type + ' alert-dismissible fade show mb-4" role="alert">' +
                    message +
                    '<button type="button" class="close" data-dismiss="alert" aria-label="Close">' +
                    '<span aria-hidden="true">&times;</span>' +
                    '</button>' +
                    '</div>';
                
                // 移除现有的提示
                $('.alert').remove();
                
                // 添加新提示
                $('.page-content').prepend(alertHtml);
                
                // 5秒后自动关闭
                setTimeout(function() {
                    $('.alert').alert('close');
                }, 5000);
            }
        });
    </script>
</body>
</html> 